<template>
  <!-- 整体 -->
  <div class="cart-item">
    <!-- 左侧 -->
    <van-checkbox checked-color="#ee0a24" v-model="itemChecked" icon-size="20px"></van-checkbox>
    <!-- 右侧 -->
    <div class="link" @click="handleLink">
      <img :src="cartData.image">
      <div class="info">
        <p class="title" v-text="cartData.title"></p>
        <div class="detail">
          <span class="price">￥{{cartData.price}}</span>
          <van-stepper button-size="26px" v-model="countChange"
          :max="cartData.stock" @click.stop/>
        </div>
        <div class="delete">
          <span>删除</span>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup>
import { Checkbox as VanCheckbox, Stepper as VanStepper } from 'vant'
import { computed } from 'vue';
import { useStore } from 'vuex';
import router from '../../../router';
const store = useStore()
// v-model="countChange"
const {cartData} = defineProps({
  cartData: {
    type: Object,
    required: true
  }
})

// 通过计算属性分别处理 v-modelde的isChecked属性
const itemChecked = computed({
  get: () => cartData.checked,
  set: newChecked => {
    store.commit('car/checkedChange', {id: cartData.id, checked: newChecked})
  }
})
// 通过计算属性分别处理 v-modelde的countChange属性
const countChange = computed({
  get: () => cartData.count,
  set: newCount => {
    store.dispatch('car/countChanged', { id: cartData.id, count: newCount })
  }
})

const handleLink = () =>{
  router.push({
    name:'product',
    params:{
      productId: cartData.productId
    }
  })
}
</script>
<style lang='scss' scoped>
.cart-item{
  height: 90px;
  padding: 10px 20px;
  display: flex;
  background-color: #fff;
  margin-bottom: 1px;
  .link{
    width: 100%;
    display: flex;
    img{
      width: 88px;
      height: 88px;
      margin-right: 10px;
      align-items: center;
    }
    .info{
      width: 100%;
      font-size: 18px;
      padding: 0;
      .title{
      margin-bottom: 5px;
      display: -webkit-box;
      -webkit-line-clamp: 1;
      -webkit-box-orient:vertical;
      overflow: hidden;
      }
      .detail{
        margin-bottom: 10px;
        .price{
          font-size: 16px;
          font-weight: 700;
          color: rgb(224, 3, 3);
          margin-right: 80px;
        }
        .van-stepper{
          float: right;
        }
      }
      .delete{
        direction: rtl;
      }
    }
    

  }
}
</style>